import { getEleSelector } from './index';

/**
 * 检查白屏 最顶层的空白元素(判断是否白屏的依据)
 */
const checkWhiteScreen = () => {
    const wrapperEle = ['html', 'body', '#app'];
    let emptyPoints = 0; // 记录空白点的个数

    const isWrapper = (ele: Element) => {
        const selector = getEleSelector(ele);
        if (wrapperEle.includes(selector)) {
            emptyPoints += 1; // 空白点加1
        }
    }

    for (let i = 1; i <= 9; i++) {
        /**
         * 在高度一半的位置，横坐标均分取9个点，查看这9个点上的元素
         * document.elementFromPoint()方法：获取位于指定坐标的最上层元素的dom元素，即使该位置的元素不可见，如设置display:none，
         * 也会返回用户实际可以看到的那个最上层的元素
         */
        const xEle = document.elementFromPoint(
            (window.innerWidth / 10) * i,
            window.innerHeight / 2
        );
        /**
         * 在宽度一半的位置，竖坐标均分取9个点，查看这9个点上的元素
         */
        const yEle = document.elementFromPoint(
            window.innerWidth / 2,
            (window.innerHeight / 10) * i
        );

        /**
         * 判断点的位置是否为空白元素
         * ！表示非空断言操作符
         */
        isWrapper(xEle!);
        isWrapper(yEle!);
    }

    // 定义阈值，如果空白点 === 18 则认为白屏
    return emptyPoints === 18;
}

export default checkWhiteScreen;
